<template>
  <!-- 大屏-投资看板 -->
  <div class="investScreen-container">
    <div class="dataScreen" ref="investScreenRef">
      <ScreenHeader :titleImg="postTitleImg"></ScreenHeader>
      <div class="investScreen-main">
        <div class="dataScreen-lf">
          <div class="lf-top">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['投资项目预测']"></ItemTitel>
            <div class="lf-top-cn">
              <div class="selectBox">
                <span class="selectLable">行业：</span>
                <SlecetTool
                  :optionsArr="selectOptionsArr"
                  :getWidth="'324'"
                  @postSelectVal="getSelecedVal"></SlecetTool>
              </div>
              <div class="tableBox">
                <scroll-board
                  :config="pgForecastState.pjTableConfig"
                  class="pjScrollBoard"
                  @click="pjTableClickHandler" />
              </div>
            </div>
          </div>
          <div class="lf-bottom">
            <div class="lf-bottom-title">
              <div class="title-left-img">
                <img
                  src="@/assets/screenImg/investBoardImg/年度投资金额各行业占比.png"
                  alt="" />
              </div>
              <div class="title-right-btns">
                <div
                  class="btnDefault m-r10"
                  :class="professionBtnActiveFlag ? 'btnActive' : ''"
                  @click="guQuanClick">
                  股权
                </div>
                <div
                  class="btnDefault"
                  :class="professionBtnActiveFlag ? '' : 'btnActive'"
                  @click="guTouClick">
                  固投
                </div>
              </div>
            </div>
            <!-- chart区域 -->
            <div class="lf-bottom-chart">
              <ProfessionChart ref="investMoneyChartRef" idName="moneyPer" />
            </div>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="ct-top">
            <div
              class="father-item"
              v-for="(n, i) in investTypeDataArr"
              :key="i">
              <div class="titleBox"><img :src="n.titleImgUrl" alt="" /></div>
              <div class="childrenBox">
                <div class="child-item" v-for="(m, j) in n.children" :key="j">
                  <div class="item-img">
                    <img
                      src="@/assets/screenImg/investBoardImg/round.png"
                      alt="" />
                  </div>
                  <div class="item-right">
                    <div class="right-name">
                      <div>{{ m.name }}</div>
                      <div>
                        <img
                          :src="
                            m.perConfig.number[0] < 0
                              ? require('@/assets/screenImg/commonImg/down.png')
                              : require('@/assets/screenImg/commonImg/up.png')
                          "
                          alt="" />
                        <digital-flop
                          :config="m.perConfig"
                          style="
                            width: 50px;
                            height: 20px;
                            display: inline-block;
                          " />
                      </div>
                      <div class="detailsBtn">查看详情</div>
                    </div>
                    <div class="right-info">
                      <digital-flop
                        :config="m.moneyConfig"
                        style="width: 140px; height: 35px" />
                      <div class="unit" :style="{ left: m.unitLeftVal + 'px' }">
                        万元
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ct-middle">
            <ItemTitel
              style="width: 65%; margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['投资年度计划']"></ItemTitel>
            <div class="ct-middle-cn">
              <div class="cn-item">
                <div class="item-top">
                  <div class="top-cn">
                    计划总金额：
                    <div class="moneyBox">
                      <digital-flop
                        :config="yearlyPlanState.planeObj.amountConfig"
                        style="width: 75px; height: 20px; margin-top: -3px" />
                      <div
                        class="unitBox"
                        :style="{
                          left: yearlyPlanState.planeObj.unitLeftVal + 'px',
                        }">
                        万元
                      </div>
                    </div>
                  </div>
                </div>
                <!-- chart区域 -->
                <div class="item-pie-chart">
                  <Pie3DChart ref="pie3DChartRef" idName="plane" />
                </div>
                <div class="item-line-chart">
                  <div class="lineTitle">固投计划完成率：</div>
                  <DashLineChart ref="pgGutouChartRef" idName="gutou" />
                </div>
              </div>
              <div class="cn-item">
                <div class="item-top">
                  <div class="top-cn">
                    实际计划总金额：
                    <div class="moneyBox">
                      <digital-flop
                        :config="yearlyPlanState.realPlaneObj.amountConfig"
                        style="width: 75px; height: 20px; margin-top: -3px" />
                      <div
                        class="unitBox"
                        :style="{
                          left: yearlyPlanState.realPlaneObj.unitLeftVal + 'px',
                        }">
                        万元
                      </div>
                    </div>
                  </div>
                </div>
                <!-- chart区域 -->
                <div class="item-pie-chart">
                  <Pie3DChart ref="pieReal3DChartRef" idName="realPlane" />
                </div>
                <div class="item-line-chart">
                  <div class="lineTitle">股权计划完成率：</div>
                  <DashLineChart ref="pgGuquanChartRef" idName="guquan" />
                </div>
              </div>
            </div>
          </div>
          <div class="ct-bottom">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['下属经营情况']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="underlingTypeOptionsArr"
                  :getWidth="'119'"
                  :modelValue="underlingTypeOptionsArr[0].value"
                  @postSelectVal="getUnderlingSelecedVal"></SlecetTool>
              </template>
            </ItemTitel>
            <div class="ct-bottom-cn">
              <scroll-board
                :config="underlingState.tableConfig"
                class="pjScrollBoard" />
            </div>
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="rg-top">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['投资个数']"></ItemTitel>
            <div class="rg-top-cn">
              <div class="progressBox">
                <div class="itemBox">
                  <div class="itemTitle">
                    <div>固投已完成：</div>
                    <div>
                      <span class="nomalNumBox">{{
                        investNumState.gutouObj.nomalNum
                      }}</span
                      ><span class="amountNumBox"
                        >/{{ investNumState.gutouObj.amountNum }}家</span
                      >
                    </div>
                  </div>
                  <!-- chart区域 -->
                  <div class="numPerChartBox">
                    <DashLineChart ref="numGutouChartRef" idName="gutouNum" />
                  </div>
                </div>
                <div class="itemBox">
                  <div class="itemTitle">
                    <div>股权已完成：</div>
                    <div>
                      <span class="nomalNumBox">{{
                        investNumState.guquanObj.nomalNum
                      }}</span
                      ><span class="amountNumBox"
                        >/{{ investNumState.guquanObj.amountNum }}家</span
                      >
                    </div>
                  </div>
                  <!-- chart区域 -->
                  <div class="numPerChartBox">
                    <DashLineChart ref="numGuquanChartRef" idName="guquanNum" />
                  </div>
                </div>
              </div>
              <div class="percentBox">
                <div class="titleBox">
                  <img
                    :src="require('@/assets/screenImg/investBoardImg/年度投资金额各行业个数.png')"
                    alt="" />
                </div>
                <!-- chart区域 -->
                <div class="percentChartBox">
                  <ProfessionChart ref="investNumChartRef" idName="numPer" />
                </div>
              </div>
            </div>
          </div>
          <div class="rg-bottom">
            <ItemTitel
              style="margin-top: 0"
              :itemTitleImg="postItemTitleImgObj['投资榜单']">
              <template #rightCnBox>
                <SlecetTool
                  :optionsArr="listTypeOptionsArr"
                  :getWidth="'119'"
                  :modelValue="listTypeOptionsArr[0].value"
                  @postSelectVal="getListSelecedVal"></SlecetTool>
              </template>
            </ItemTitel>
            <div class="rg-bottom-cn">
              <scroll-board
                :config="investListState.tableConfig"
                class="pjScrollBoard"
                @click="investListClickHandler" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="investScreen">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import ScreenHeader from "../components/ScreenHeader";
import ItemTitel from "../components/ItemTitel";
import SlecetTool from "../components/SlecetTool";
import dayjs from "dayjs";
import { ScrollBoard, DigitalFlop } from "@kjgl77/datav-vue3";
import { getScale, changeNumToWan } from "../utils/handelScreen";
import ProfessionChart from "./components/ProfessionChart.vue";
import Pie3DChart from "./components/Pie3DChart.vue";
import DashLineChart from "./components/DashLineChart.vue";
import {
  forecastApi,
  overviewApi,
  yearlyPlaneApi,
  underlingApi,
  investNumApi,
  investListTableApi,
} from "@/api-dashboard/investApi";

// 页面大标题图片
const postTitleImg = require("@/assets/screenImg/investBoardImg/投资看板.png");
// 各小标题图片
const postItemTitleImgObj = reactive({
  投资项目预测: require("@/assets/screenImg/investBoardImg/投资项目预测.png"),
  投资年度计划: require("@/assets/screenImg/investBoardImg/投资年度计划.png"),
  下属经营情况: require("@/assets/screenImg/investBoardImg/股权投资下属经营情况.png"),
  投资个数: require("@/assets/screenImg/investBoardImg/年度计划投资个数.png"),
  投资榜单: require("@/assets/screenImg/investBoardImg/投资榜单.png"),
});

const nowYearValue = ""+dayjs().year();

// =================投资项目预测=====================
// 下拉选择框 - 选项在前端固定
const selectOptionsArr = ref([]);
// 获取行业下拉列表
const getSelectOpitonsArr = () => {
  forecastApi.getFiledList().then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let getDataArr = data.records.map((n, i) => {
        return {
          label: n.field,
          value: n.field,
        };
      });
      selectOptionsArr.value = getDataArr;
    }
  });
};
const selectedValue = ref("");
// 下拉框选择之后触发
const getSelecedVal = (val) => {
  selectedValue.value = val;
  getForecastTabelData(val);
};

// 企业列表查询
const tableBaseConfig = reactive({
  header: ["公司名称", "行业名称"],
  headerHeight: 30,
  headerBGC: "rgba(21,77,160,0.2)",
  evenRowBGC: "rgba(21,77,160,0.1)",
  align: ["center", "center", "center"],
});
const pgForecastState = reactive({
  pjTableConfig: {
    ...tableBaseConfig,
    data: [],
  },
});

const getForecastTabelData = (param) => {
  forecastApi.tzxmyc({ field: param }).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      if (data.records.length < 5) {
        tableBaseConfig.waitTime = 1000000000;
      } else {
        tableBaseConfig.waitTime = 2000;
      }
      let getChangeDataArr = data.records.map((n, i) => {
        return [
          n.corporate_name,
          n.field,
          '<span style="color:#36E3E3;text-decoration: underline;text-underline-offset: 5px;cursor: pointer;">查看画像</span>',
        ];
      });
      pgForecastState.pjTableConfig = {
        ...tableBaseConfig,
        data: getChangeDataArr,
      };
    } else {
      // 无数据
      pgForecastState.pjTableConfig = {
        ...tableBaseConfig,
        data: [["-", "-", "-"]],
      };
    }
  });
};
// 点击动作暂未确定
const pjTableClickHandler = (e) => {
  console.log("点击了啥？？？", e.row);
};

// ===================各行业占比=====================
const professionBtnActiveFlag = ref(true);
const guTouClick = () => {
  if (professionBtnActiveFlag.value)
    professionBtnActiveFlag.value = !professionBtnActiveFlag.value;
  investMoneyChartRef.value?.initProfessionChart(nowYearValue, "固投");
};
const guQuanClick = () => {
  if (!professionBtnActiveFlag.value)
    professionBtnActiveFlag.value = !professionBtnActiveFlag.value;
  investMoneyChartRef.value?.initProfessionChart(nowYearValue, "股权");
};

// =========================投资总览===========================
// 翻牌器 - 中间金额默认配置
const digitalMoneyBaseConfig = reactive({
  content: "{nt}",
  toFixed: 2,
  textAlign: "left",
  animationFrame: 200,
  style: {
    fontSize: 30,
    fill: "#36e3e3",
    shadowOffsetX: 0,
    shadowOffsetY: 1,
    shadowBlur: 7,
    shadowColor: "#56CAFF",
  },
});

/**
 * 翻牌器 - 中间百分比默认配置
 * @param value - 接口获取的百分比值
 * @return 百分比翻牌器配置项
 */
let getDigitalPerBaseConfig = (value) => {
  return {
    content: "{nt}%",
    toFixed: 2,
    textAlign: "left",
    animationFrame: 200,
    style: {
      fontSize: 12,
      fill: value >= 0 ? "#10FF0E" : "#F50000",
    },
  };
};
const investTypeDataArr = ref([
  {
    titleImgUrl: require("@/assets/screenImg/investBoardImg/固投.png"),
    children: [
      {
        name: "新建项目",
        perConfig: {
          number: [0],
          ...getDigitalPerBaseConfig(0),
        },
        moneyConfig: {
          number: [0],
          ...digitalMoneyBaseConfig,
        },
        unitLeftVal: 64,
      },
      {
        name: "续建项目",
        perConfig: {
          number: [0],
          ...getDigitalPerBaseConfig(0),
        },
        moneyConfig: {
          number: [0],
          ...digitalMoneyBaseConfig,
        },
        unitLeftVal: 64,
      },
    ],
  },
  {
    titleImgUrl: require("@/assets/screenImg/investBoardImg/股权.png"),
    children: [
      {
        name: "续投",
        perConfig: {
          number: [0],
          ...getDigitalPerBaseConfig(0),
        },
        moneyConfig: {
          number: [0],
          ...digitalMoneyBaseConfig,
        },
        unitLeftVal: 64,
      },
      {
        name: "新设立",
        perConfig: {
          number: [0],
          ...getDigitalPerBaseConfig(0),
        },
        moneyConfig: {
          number: [0],
          ...digitalMoneyBaseConfig,
        },
        unitLeftVal: 64,
      },
    ],
  },
]);

const getOverviewData = () => {
  overviewApi.tzzl({ year: nowYearValue }).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let getDataObj = data.records[0];
      // 固投
      const invAmountNameObj = {
        0: "investment_new_amount",
        1: "investment_renewal_amount",
      };
      const invPerNameObj = {
        0: "investment_new_rate",
        1: "investment_renewal_rate",
      };
      investTypeDataArr.value[0].children.map((m, j) => {
        m.moneyConfig.number[0] = getDataObj[invAmountNameObj[j]]
          ? getDataObj[invAmountNameObj[j]] / 10000
          : 0;
        let valStr = m.moneyConfig.number[0].toFixed(2) + "";
        m.unitLeftVal = valStr.length * 16;
        let getPerNum = getDataObj[invPerNameObj[j]]
          ? getDataObj[invPerNameObj[j]] * 100
          : 0;
        m.perConfig = {
          number: [getPerNum],
          ...getDigitalPerBaseConfig(getPerNum),
        };
      });
      // 股权
      const shaAmountNameObj = {
        0: "shareholding_renewal_amount",
        1: "shareholding_new_amount",
      };
      const shaPerNameObj = {
        0: "shareholding_renewal_rate",
        1: "shareholding_new_rate",
      };
      investTypeDataArr.value[1].children.map((m, j) => {
        m.moneyConfig.number[0] = getDataObj[shaAmountNameObj[j]]
          ? getDataObj[shaAmountNameObj[j]] / 10000
          : 0;
        let valStr = m.moneyConfig.number[0].toFixed(2) + "";
        m.unitLeftVal = valStr.length * 16;
        let getPerNum = getDataObj[shaPerNameObj[j]]
          ? getDataObj[shaPerNameObj[j]] * 100
          : 0;
        m.perConfig = {
          number: [getPerNum],
          ...getDigitalPerBaseConfig(getPerNum),
        };
      });
    }
  });
};

// ====================投资年度计划==========================
const planeMoneyBaseConfig = reactive({
  content: "{nt}",
  toFixed: 2,
  textAlign: "left",
  animationFrame: 200,
  style: {
    fontSize: 18,
    fontWeight: "bold",
    fill: "#56CAFF",
  },
});
const yearlyPlanState = reactive({
  // 计划
  planeObj: {
    unitLeftVal: 40,
    amountConfig: {
      number: [0],
      ...planeMoneyBaseConfig,
    },
    investAmount: 0, // 固投
    shareholdAmount: 0, // 股权
  },
  // 实际计划
  realPlaneObj: {
    unitLeftVal: 40,
    amountConfig: {
      number: [0],
      ...planeMoneyBaseConfig,
    },
    investAmount: 0, // 固投
    shareholdAmount: 0, // 股权
  },
  investRate: 0, // 固投完成率
  shareholdRate: 0, // 股权完成率
});
const getYearlyData = () => {
  yearlyPlaneApi.tzndjh({ year: nowYearValue }).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let getDataObj = data.records[0];
      // ===========计划===========
      yearlyPlanState.planeObj.amountConfig.number[0] =
        getDataObj.plan_sum_amount ? getDataObj.plan_sum_amount / 10000 : 0;
      // 单位与数值间距
      let planeAmountstr =
        yearlyPlanState.planeObj.amountConfig.number[0].toFixed(2) + "";
      yearlyPlanState.planeObj.unitLeftVal = planeAmountstr.length * 10;

      yearlyPlanState.planeObj.investAmount = getDataObj.plan_investment_amount;
      yearlyPlanState.planeObj.shareholdAmount =
        getDataObj.plan_shareholding_amount;

      let plane3DObj = {
        investAmount: yearlyPlanState.planeObj.investAmount,
        shareholdAmount: yearlyPlanState.planeObj.shareholdAmount,
      };
      pie3DChartRef.value.initPerPieChart(plane3DObj);

      // ===========实际计划============
      yearlyPlanState.realPlaneObj.amountConfig.number[0] =
        getDataObj.real_sum_amount ? getDataObj.real_sum_amount / 10000 : 0;
      // 单位与数值间距
      let realPlaneAmountstr =
        yearlyPlanState.realPlaneObj.amountConfig.number[0].toFixed(2) + "";
      yearlyPlanState.realPlaneObj.unitLeftVal = realPlaneAmountstr.length * 10;

      // 重新初始化占比饼图
      yearlyPlanState.realPlaneObj.investAmount =
        getDataObj.real_investment_amount;
      yearlyPlanState.realPlaneObj.shareholdAmount =
        getDataObj.real_shareholding_amount;

      let real3DObj = {
        investAmount: yearlyPlanState.realPlaneObj.investAmount,
        shareholdAmount: yearlyPlanState.realPlaneObj.shareholdAmount,
      };
      pieReal3DChartRef.value.initPerPieChart(real3DObj);

      // ===========完成率========
      yearlyPlanState.investRate = getDataObj.investment_rate;
      yearlyPlanState.shareholdRate = getDataObj.shareholding_rate;

      // 重新初始化完成率图表
      pgGutouChartRef.value.initPlaneDashLineChart(
        yearlyPlanState.investRate * 100
      );
      pgGuquanChartRef.value.initPlaneDashLineChart(
        yearlyPlanState.shareholdRate * 100
      );
    }
  });
};

// ===================股权投资下属经营情况===================
const underlingTypeOptionsArr = ref([
  {
    label: "全资",
    value: "0",
  },
  {
    label: "控股",
    value: "1",
  },
  {
    label: "参股",
    value: "2",
  },
]);

const underlingTableBaseConfig = reactive({
  header: [
    "公司名称",
    "收入(万元)",
    "支出(万元)",
    "利润(万元)",
    "议题报送个数",
    "重大事项",
  ],
  index: true,
  indexHeader: "排名",
  headerHeight: 30,
  headerBGC: "rgba(21,77,160,0.2)",
  evenRowBGC: "rgba(21,77,160,0.1)",
  columnWidth: [50, 200, 120, 120, 120, 100, 80],
  align: ["center", "center", "center", "center", "center", "center", "center"],
});
const underlingState = reactive({
  tableConfig: {
    ...underlingTableBaseConfig,
    data: [],
  },
});

const getUnderlingSelecedVal = (val) => {
  getSituationData(val);
};
const getSituationData = (typeVal) => {
  underlingApi.gqtzxsjyqk({ type: typeVal }).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let getDataArr = data.records.sort((a, b) => {
        return b.income - a.income;
      });
      let tabeleDataArr = getDataArr.map((n, i) => {
        return [
          n.corporate_name,
          changeNumToWan(n.income),
          changeNumToWan(n.cost),
          changeNumToWan(n.profit),
          n.topics,
          '<span style="color:#36E3E3;text-decoration: underline;text-underline-offset: 5px;cursor: pointer;">查看</span>',
        ];
      });
      underlingState.tableConfig = {
        ...underlingTableBaseConfig,
        data: tabeleDataArr,
      };
    } else {
      // 无数据
      underlingState.tableConfig = {
        ...underlingTableBaseConfig,
        data: [["-", "-", "-", "-", "-", "-"]],
      };
    }
  });
};

// =================年度计划投资个数===============
const investNumState = reactive({
  gutouObj: {
    nomalNum: 0,
    amountNum: 0,
    perNum: 0,
  },
  guquanObj: {
    nomalNum: 0,
    amountNum: 0,
    perNum: 0,
  },
});
const getInvestNumData = () => {
  investNumApi.ndjhtzgs({ year: ""+nowYearValue }).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let getDataObj = data.records[0];
      // 固投
      investNumState.gutouObj.nomalNum = getDataObj.plan_investment;
      investNumState.gutouObj.amountNum = getDataObj.real_investment;
      investNumState.gutouObj.perNum = getDataObj.investment_completion_rate;
      numGutouChartRef.value.initPlaneDashLineChart(
        investNumState.gutouObj.perNum * 100
      );
      // 股权
      investNumState.guquanObj.nomalNum = getDataObj.plan_shareholding;
      investNumState.guquanObj.amountNum = getDataObj.real_shareholding;
      investNumState.guquanObj.perNum = (
        getDataObj.shareholding_completion_rate * 100
      ).toFixed(0);
      numGuquanChartRef.value.initPlaneDashLineChart(
        investNumState.guquanObj.perNum
      );
    }
  });
};

// ================投资榜单==================
const listTypeOptionsArr = ref([
  {
    label: "红榜",
    value: "0",
  },
]);
const getListSelecedVal = (val) => {
  console.log(val);
};

const investListTableBaseConfig = reactive({
  header: ["投资名称", "操作"],
  index: true,
  indexHeader: "序号",
  headerHeight: 30,
  headerBGC: "rgba(21,77,160,0.2)",
  evenRowBGC: "rgba(21,77,160,0.1)",
  columnWidth: [50, 380, 100],
  align: ["center", "center", "center"],
});
const investListState = reactive({
  tableConfig: {
    ...investListTableBaseConfig,
    data: [],
  },
});
const getRedListTabelData = () => {
  investListTableApi.tzbd().then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let tabeleDataArr = data.records.map((n, i) => {
        return [
          n.invest_name,
          '<span style="color:#36E3E3;text-decoration: underline;text-underline-offset: 5px;cursor: pointer;">查看详情</span>',
        ];
      });
      investListState.tableConfig = {
        ...investListTableBaseConfig,
        data: tabeleDataArr,
      };
    } else {
      // 无数据
      investListState.tableConfig = {
        ...investListTableBaseConfig,
        data: [["-", "-"]],
      };
    }
  });
};
// 点击动作暂未确定
const investListClickHandler = (e) => {
  console.log(e.row);
};

// 所有chart组件的ref
const investMoneyChartRef = ref();
const pie3DChartRef = ref();
const pgGutouChartRef = ref();
const pieReal3DChartRef = ref();
const pgGuquanChartRef = ref();
const numGutouChartRef = ref();
const numGuquanChartRef = ref();
const investNumChartRef = ref();

// 所有图表对象
const screenChartObj = reactive({
  chart1: null,
  chart2: null,
  chart3: null,
  chart4: null,
  chart5: null,
  chart6: null,
  chart7: null,
  chart8: null,
});

const initAllInvestCharts = (param) => {
  // 各行业占比饼图
  screenChartObj.chart1 = investMoneyChartRef.value?.initProfessionChart(
    nowYearValue,
    "股权"
  );
  // 年度计划图
  let chart2ParamsObj = {
    investAmount: yearlyPlanState.planeObj.investAmount,
    shareholdAmount: yearlyPlanState.planeObj.shareholdAmount,
  };
  screenChartObj.chart2 = pie3DChartRef.value?.initPerPieChart(chart2ParamsObj);
  screenChartObj.chart3 = pgGutouChartRef.value?.initPlaneDashLineChart(
    yearlyPlanState.investRate
  );
  // 年度实际计划图
  let chart4ParamsObj = {
    investAmount: yearlyPlanState.realPlaneObj.investAmount,
    shareholdAmount: yearlyPlanState.realPlaneObj.shareholdAmount,
  };
  screenChartObj.chart4 =
    pieReal3DChartRef.value?.initPerPieChart(chart4ParamsObj);
  screenChartObj.chart5 = pgGuquanChartRef.value?.initPlaneDashLineChart(
    yearlyPlanState.shareholdRate
  );
  // 年度计划投资个数
  screenChartObj.chart6 = numGutouChartRef.value?.initPlaneDashLineChart(
    investNumState.gutouObj.perNum
  );
  screenChartObj.chart7 = numGuquanChartRef.value?.initPlaneDashLineChart(
    investNumState.guquanObj.perNum
  );
  // 年度投资个数占比
  screenChartObj.chart8 = investNumChartRef.value?.initProfessionChart(param);
};

// 监听浏览器 resize 事件时执行
const investScreenRef = ref(null);
const screenResize = () => {
  if (investScreenRef.value) {
    investScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};
onMounted(() => {
  // 初始化自适应 -- 刚显示的时候就给外层盒子加上缩放属性
  if (investScreenRef.value) {
    // 缩放并居中。注意：需要搭配 position: absolute; left: 50%; top: 50%; 一起使用
    investScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    // 设计稿宽度
    investScreenRef.value.style.width = `1920px`;
    // 设计稿高度
    investScreenRef.value.style.height = `1080px`;
  }
  getSelectOpitonsArr();
  getForecastTabelData();
  getOverviewData();
  getYearlyData();
  getSituationData(0);
  getInvestNumData();
  getRedListTabelData();
  // 初始化 echarts
  initAllInvestCharts();
  window.addEventListener("resize", screenResize);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", screenResize);
  Object.values(screenChartObj).forEach((val) => val?.dispose());
});
</script>

<style lang="scss" scoped>
@import "./investBoard.scss";
</style>
<style lang="scss">
// ScrollBoard 默认样式修改
.investScreen-container {
  .dataScreen {
    .investScreen-main {
      .pjScrollBoard {
        .header {
          .header-item {
            font-size: 12px;
            color: #56caff;
          }
        }
        .rows {
          .row-item {
            font-size: 14px !important;
            color: #d3e3ff !important;
            opacity: 0.7 !important;
          }
        }
      }
    }
  }
}
</style>
